<script setup>
import headers from './headers.vue';
import { getDetailAPI } from '@/apis/home'
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { nyr } from '@/utils/tool'
import { postReviewAPI, getReviewListAPI, collectAPI, checkCollectAPI, likeAPI, checkLikeAPI, getLastArticleListAPI } from '@/apis/home'
import { judgeFollowAPI, changeFollowAPI } from '../apis/follow';
import useDataStore from '../store';
import { storeToRefs } from 'pinia';
import reviewItem from '@/components/reviewItem.vue'
import { ArrowRight } from '@element-plus/icons-vue'



const dataStore = useDataStore()
const { userInfo } = storeToRefs(dataStore)

const route = useRoute()
const router = useRouter()

defineOptions({
    name: 'detail'
})

let { article_id, user_id } = route.query
let articleDetail = ref({})   //文章详情
let reviewList = ref()  //评论列表
let textarea = ref()    //评论内容
let collectStatus = ref(false)      //收藏状态
let likeStatus = ref(false)      //点赞状态
let lastArticleList = ref([])
let hasFollow = ref(false)  // 是否关注
let isMe = ref(false)   // 是否自己

const back = () => {
    router.back()
}

/* --------------------------------- 请求详情页数据 -------------------------------- */
const getDetail = async () => {
    let data = await getDetailAPI(article_id, user_id)
    if (data.code === 200) {
        articleDetail.value = data.data[0]
    }
    getLastArticleList()
    judgeFollow()

}
getDetail()

/* --------------------------------- 请求评论数据 --------------------------------- */
const getReviewList = async () => {
    let data = await getReviewListAPI(article_id)
    if (data.code === 200) {
        reviewList.value = data.endResult
    }
}
getReviewList()



/* ---------------------------------- 发表评论 ---------------------------------- */
const reviewAction = async () => {
    let { data } = await postReviewAPI(textarea.value, userInfo.value, article_id, articleDetail.value.article_author_id)
    if (data) {
        ElMessage({
            message: '评论成功',
            type: 'success'
        })
    }
    textarea.value = ''
    getReviewList()
}

/* ---------------------------- 初次进入时判断当前文章是否已经被当前用户收藏 --------------------------- */
const checkCollect = async () => {
    let data = await checkCollectAPI(userInfo.value.user_id, article_id)
    if (data.code === 200) {
        collectStatus.value = data.sta
    }
}
checkCollect()

/* ---------------------------------- 点击收藏 ---------------------------------- */
const collectAction = async () => {
    let data = await collectAPI(userInfo.value.user_id, article_id, articleDetail.value.article_collect, collectStatus.value)
    if (data.code === 200) {
        if (collectStatus.value) {
            ElMessage({
                message: '取消收藏成功',
                type: 'warning'
            })
        } else {
            ElMessage({
                message: '收藏成功',
                type: 'success'
            })
        }
        collectStatus.value = !collectStatus.value
        getDetail()
    }
}


/* ---------------------------- 初次进入时判断当前文章是否已经被当前用户点赞 --------------------------- */
const checkLike = async () => {
    let data = await checkLikeAPI(userInfo.value.user_id, article_id)
    if (data.code === 200) {
        likeStatus.value = data.sta
    }
}
checkLike()

/* ---------------------------------- 点击点赞 ---------------------------------- */
const likeAction = async () => {
    let data = await likeAPI(userInfo.value.user_id, article_id, articleDetail.value.article_like, likeStatus.value)
    if (data.code === 200) {
        if (likeStatus.value) {
            ElMessage({
                message: '取消点赞成功',
                type: 'warning'
            })
        } else {
            ElMessage({
                message: '点赞成功',
                type: 'success'
            })
        }
        likeStatus.value = !likeStatus.value
        getDetail()
    }
}


/* ------------------------------- 请求文章作者的最近文章 ------------------------------ */
const getLastArticleList = async () => {
    let data = await getLastArticleListAPI(articleDetail.value?.user_id)
    if (data.code === 200) {
        lastArticleList.value = data.data
    }
}

/* ------------------------------ 点击跳转到该作者的个人空间 ----------------------------- */
const toUserSpaceAction = () => {
    router.push({ name: 'me', query: { user_id: articleDetail.value.user_id } })
}



/* ------------------------------ 判断当前作者是否已经关注 ------------------------------ */
const judgeFollow = async () => {
    let data = await judgeFollowAPI(userInfo.value.user_id, user_id)
    if (data.code === 200) {
        hasFollow.value = true
        isMe.value = false
    } else if (data.code === 400) {
        hasFollow.value = false
    } else if (data.code === 401) {
        isMe.value = true
    }
}

/* ---------------------------------- 点击关注/取消关注 ---------------------------------- */
const followAction = async () => {
    hasFollow.value = !hasFollow.value
    let data = await changeFollowAPI(userInfo.value.user_id, user_id, hasFollow.value)
    if (data.code === 200) {
        if (data.flag) {
            ElMessage({
                message: '关注成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: '取消关注成功',
                type: 'success',
            })
        }
    }

}




</script>

<template>
    <div class="page">
        <el-backtop :right="50" :bottom="100" />
        <div class="container">
            <div class="temp"></div>
            <div class="main">
                <div class="main-left">
                    <div class="left-bread">
                        <div class="bread-back"><el-button size="small" @click="back">返回</el-button></div>
                        <div class="bread-link">
                            <el-breadcrumb class="bread-link">
                                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                                <el-breadcrumb-item>
                                    <div><span>{{ articleDetail?.article_title }}</span></div>
                                </el-breadcrumb-item>
                            </el-breadcrumb>
                        </div>
                    </div>
                    <div class="left-main">
                        <div class="left-title">{{ articleDetail?.article_title }}</div>
                        <div class="left-author">
                            <div>{{ articleDetail?.user_name }}</div>
                            <div>{{ nyr(new Date(articleDetail?.article_time * 1), '-') }}</div>
                        </div>
                        <div class="left-intro">{{ articleDetail?.article_introduction }}</div>
                        <div class="left-content" v-html="articleDetail?.article_content"></div>
                        <div class="left-btns">
                            <div class="btn" :class="{ likeSelected: likeStatus }" @click="likeAction"><i
                                    class="iconfont icon-dianzan_kuai"></i>点赞({{
                                        articleDetail?.article_like
                                    }})</div>
                            <div class="btn" :class="{ collectSelected: collectStatus }" @click="collectAction">
                                <i class="iconfont icon-shoucang"></i>收藏({{
                                    articleDetail?.article_collect
                                }})
                            </div>
                            <div class="share">
                                <div>
                                    <i class="iconfont icon-qq"></i>
                                    <i class="iconfont icon-weixin"></i>
                                    <i class="iconfont icon-weibo"></i>
                                    <i class="iconfont icon-twitter"></i>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="left-review">
                        <div class="review-title">评论</div>
                        <div class="review-area"><el-input v-model="textarea" autoSize :rows="3" type="textarea"
                                placeholder="在这里发表评论" /></div>
                        <div class="review-btn">
                            <el-button type="primary" plain color="bisque" @click="reviewAction">发布评论</el-button>
                        </div>
                        <reviewItem :getReviewList="getReviewList" :reviewList="reviewList"
                            :article_author_id="articleDetail.article_author_id"></reviewItem>
                    </div>
                </div>
                <div class="main-right">
                    <div class="right-user">
                        <div class="user-img"><img :src="articleDetail?.user_avatar" alt=""></div>
                        <div class="user-name" @click="toUserSpaceAction">{{ articleDetail?.user_name }}</div>
                        <div class="user-online"><span
                                :style="{ color: articleDetail.user_online === '1' ? '#00d861' : '#cccccc' }">●</span>
                            <span>{{ articleDetail.user_online === '1' ? ' 在线' : ' 离线' }}</span>
                        </div>
                        <div class="user-total">
                            <div>累计发布：{{ articleDetail?.count }}</div>
                            <div>累计获赞：{{ articleDetail?.likeCount }}</div>
                        </div>
                        <div class="user-follow" v-if="!hasFollow && !isMe"><el-button @click="followAction"
                                type="primary" color="#8e8cd8" plain>关
                                注 {{
                                    articleDetail?.user_name }}</el-button></div>
                        <div class="user-follow" v-else-if="hasFollow && !isMe"><el-button @click="followAction"
                                type="primary" color="#8e8cd8" plain>已 关
                                注 {{
                                    articleDetail?.user_name }}</el-button></div>
                    </div>
                    <div class="right-late">
                        <div class="late-title">最新发布</div>
                        <div class="late-content">
                            <div class="late-item" v-for="item in lastArticleList" :key="item.article_id">
                                <div class="item-img"><img :src="item.article_coverimg" alt=""></div>
                                <div class="item-text">
                                    <div class="text-title">{{ item.article_title }}</div>
                                    <div class="text-time">{{ nyr(new Date(item.article_time * 1), '-') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang='scss'>
::v-deep {
    .el-breadcrumb__item .el-breadcrumb__inner {
        color: #ccc;

        &:hover {
            color: #ccc;
        }
    }
}

.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    color: #333333;

    .headers {
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 1000;
    }

    .temp {
        width: 100%;
        height: 80px;

        @media screen and (max-width:600px) {
            display: none;
        }
    }

    .main {
        margin-top: 20px;
        // width: 1300px;
        width: 90%;
        display: flex;

        @media screen and (max-width:600px) {
            display: block;
        }

        .main-left {
            width: 65%;

            @media screen and (max-width:600px) {
                width: 100%;
            }

            .left-bread {
                width: 100%;
                background-color: white;
                box-sizing: border-box;
                padding: 15px 20px;
                margin-bottom: 10px;
                display: flex;
                align-items: center;
                border-radius: 10px;
                justify-content: space-between;



                .bread-link {
                    margin-left: 10px;
                    font-size: 13px;
                    color: #ccc;
                    display: flex;
                    align-items: center;


                }
            }

            .left-main {
                width: 100%;
                background-color: white;
                box-sizing: border-box;
                padding: 30px 20px;
                overflow: hidden;

                .left-title {
                    font-size: 16px;
                    font-weight: 600;
                    font-family: "微软雅黑";

                }

                .left-author {
                    display: flex;
                    width: 100%;
                    justify-content: space-between;
                    margin-top: 20px;
                    font-size: 13px;
                    color: #aaa;
                }

                .left-intro {
                    margin-top: 20px;
                    background-color: #eee;
                    box-sizing: border-box;
                    padding: 10px 15px;
                    border-radius: 10px;
                    color: #999999;
                    line-height: 20px;
                }

                .left-content {
                    margin-top: 20px;
                    line-height: 25px;
                    font-size: 14px;
                }

                .left-btns {
                    margin-top: 40px;
                    display: flex;


                    .collectSelected {
                        background-color: #fddf8e20;
                        border: #fddf8e solid 1px !important;
                        color: #fddf8e !important;
                    }

                    .likeSelected {
                        background-color: #fd8ead38;
                        color: #fd8ead !important;
                        border: #fd8ead solid 1px !important;
                    }

                    .btn {
                        width: 80px;
                        height: 30px;
                        line-height: 30px;
                        border: #ccc solid 1px;
                        margin: 0 10px;
                        text-align: center;
                        border-radius: 5px;
                        color: #999999;
                        cursor: pointer;
                        transition: all .25s ease;

                        i {
                            margin-right: 5px;
                            line-height: 30px;
                        }

                        &:nth-child(1):hover {
                            color: #fd8ead;
                            border: #fd8ead solid 1px;
                        }

                        &:nth-child(2):hover {
                            color: #fddf8e;
                            border: #fddf8e solid 1px;
                        }
                    }

                    .share {
                        flex: 1;
                        display: flex;
                        justify-content: flex-end;
                        height: 30px;

                        >div {
                            height: 100%;
                            line-height: 30px;

                            i {
                                margin: 0 10px;
                            }
                        }
                    }
                }
            }

            .left-review {
                margin-top: 20px;
                width: 100%;
                background-color: white;
                box-sizing: border-box;
                padding: 20px 15px;

                .review-title {
                    font-size: 18px;
                    font-weight: 600;
                    font-family: "微软雅黑";

                }

                .review-area {
                    margin-top: 20px;
                }

                .review-btn {
                    margin-top: 10px;
                    color: #fddf8e;
                }

                // .review-content {
                //     margin-top: 20px;
                //     width: 100%;

                //     .item {
                //         width: 100%;
                //         border-bottom: #eee solid 1px;
                //         padding-bottom: 30px;

                //         .item-user {
                //             width: 100%;
                //             display: flex;
                //             align-items: center;

                //             .user-img {
                //                 border-radius: 50%;
                //                 overflow: hidden;
                //                 width: 40px;
                //                 height: 40px;

                //                 img {
                //                     width: 100%;
                //                     height: 100%;
                //                 }
                //             }

                //             .user-name {
                //                 width: 80%;
                //                 font-size: 16px;
                //                 margin-left: 20px;
                //             }
                //         }

                //         .item-text {
                //             width: 100%;
                //             margin-top: 20px;
                //             margin-left: 40px;
                //         }

                //         .item-answer {
                //             cursor: pointer;
                //             display: inline-block;
                //             box-sizing: border-box;
                //             padding: 5px 10px;
                //             margin-top: 10px;
                //             background-color: #ddd;
                //         }
                //     }
                // }
            }
        }

        .main-right {
            margin-left: 20px;
            flex: 1;

            @media screen and (max-width:600px) {
                margin-top: 20px;
                margin-left: 0;
            }

            .right-user {
                box-sizing: border-box;
                padding: 20px 15px;
                width: 100%;
                background-color: white;
                display: flex;
                flex-direction: column;
                align-items: center;

                .user-img {
                    overflow: hidden;
                    width: 100px;
                    height: 100px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .user-name {
                    font-size: 18px;
                    margin-top: 10px;
                    transition: all .25s ease;
                    cursor: pointer;

                    &:hover {
                        color: #fddf8e;
                    }
                }

                .user-online {
                    margin-top: 10px;
                }

                .user-total {
                    margin-top: 15px;
                    font-size: 14px;
                    color: #aaa;
                    display: flex;
                    width: 100%;
                    justify-content: space-around;
                }

                .user-follow {
                    margin-top: 20px;
                }
            }

            .right-late {
                margin-top: 20px;
                background-color: white;
                width: 100%;
                box-sizing: border-box;
                padding: 20px 15px;

                .late-title {
                    font-size: 16px;
                    font-weight: 600;
                    font-family: "微软雅黑";
                }

                .late-content {
                    margin-top: 20px;

                    .late-item {
                        width: 100%;
                        display: flex;
                        padding-bottom: 20px;
                        margin-bottom: 20px;
                        border-bottom: #eee solid 1px;

                        .item-img {
                            width: 150px;
                            height: 90px;
                            overflow: hidden;

                            img {
                                width: 100%;
                                // height: 100%;
                            }
                        }

                        .item-text {
                            // flex: 1;
                            margin-left: 20px;
                            display: flex;
                            flex-direction: column;

                            .text-title {
                                font-size: 16px;
                            }

                            .text-type {
                                width: 100%;
                                margin-top: 10px;
                                background-color: #eee;
                                box-sizing: border-box;
                                padding: 10px 15px;
                                border-radius: 10px;
                                color: #999999;
                            }

                            .text-time {
                                margin-top: 10px;
                            }
                        }
                    }
                }
            }
        }
    }


}
</style>